<script setup>
import { onMounted, ref, reactive, nextTick, watchEffect, toRefs, computed } from "vue";
import dirPng from '@/assets/img/dir.png'
import { getWaveRange } from './forecast/fore'

const props = defineProps({
    dateValue: {
        type: String,
        default: "2023年8月25日"
    },
})

const { dateValue } = toRefs(props)

const sms = [
    {
        latitude: 27.871,
        longitude: 121.000,
        type: 'wind'
    },
    {
        latitude: 27.871,
        longitude: 121.000,
        type: 'tide'
    },
    {
        latitude: 27.871,
        longitude: 121.000,
        type: 'wave'
    }
]

const handleSm = () => {
    // startTime是当天的0点，endTime是当天的23:59:59;格式位2023-09-25 20:00
    let startTime = dateValue.value + ' 00:00'
    let endTime = dateValue.value + ' 23:59'

    sms.forEach(item => {
        let formData = new FormData()
        formData.append('startDateTime', startTime)
        formData.append('endDateTime', endTime)
        formData.append('featureType', item.type)
        formData.append('latitude', item.latitude)
        formData.append('longitude', item.longitude);
        getWaveRange(formData).then(res => {
            if(res.data.data.tideDataList){
                res.data.data.tideDataList.forEach((v,idx)=>{
                    dataSource.value[idx].tide = v?.toFixed(2)
                })
            }else if(res.data.data.windDataList){
                res.data.data.windDataList.forEach((v,idx)=>{
                    dataSource.value[idx].wind = {
                        speed: v[0].toFixed(1),
                        direction: v[1].toFixed(2),
                        level: windLevel.find((item) => item.speed > v[0].toFixed(2)).level,
                    }
                })
            }else if(res.data.data.waveDataList){
                res.data.data.waveDataList.forEach((v,idx)=>{
                    dataSource.value[idx].wave = {
                        height: v[0].toFixed(1),
                        direction: v[1].toFixed(2),
                    }
                })
            }
        })
    })
}
onMounted(() => {
    dataSource.value = new Array(24).fill(0).map((item, index) => {
        return {
            name: "三澳",
            // time从00:00开始，每隔1小时
            time: `${index.toString().padStart(2, "0")}:00`,
            temp: {
                temp: (Math.random() * 35).toFixed(1),
                color: tempColor.find((item) => item.temp > (Math.random() * 35).toFixed(1)).color,
                // 湿度
                humidity: (Math.random() * 100).toFixed(1),
            },
            // weather: index % 2 === 0 ? sunnyPng : cloudyPng,
            wave: {
                // height: (Math.random() * 1).toFixed(1),
                // direction: Math.round(Math.random() * 360),
                height:0,
                direction:0,
            },
            // tide: (Math.random() * 2).toFixed(1),
            tide:0,
            surge: (Math.random() * 2).toFixed(1),
            wind: {
                // speed: (Math.random() * 2).toFixed(1),
                // direction: Math.round(Math.random() * 360),
                // level: windLevel.find((item) => item.speed > (Math.random() * 2).toFixed(1)).level,
                speed:0,
                direction:0,
                level:0,
            },
            current: {
                speed: (Math.random() * 1).toFixed(1),
                direction: Math.round(Math.random() * 360),
            },
        }
    })

    handleSm()
})

const dataSource = ref([
])

// 温度颜色对应
let tempColor = [
    { color: "#0000ff", temp: 0 },
    { color: "#00ffff", temp: 10 },
    { color: "#00ff00", temp: 20 },
    { color: "#ffff00", temp: 30 },
    { color: "#ff0000", temp: 40 },
    { color: "#ff00ff", temp: 50 },
]
// 风速等级对应
let windLevel = [
    { level: "0", speed: 0 },
    { level: "1", speed: 0.3 },
    { level: "2", speed: 1.6 },
    { level: "3", speed: 3.4 },
    { level: "4", speed: 5.5 },
    { level: "5", speed: 8.0 },
    { level: "6", speed: 10.8 },
    { level: "7", speed: 13.9 },
]

const getWeek = computed(() => {
    let week = new Date(dateValue.value).getDay()
    switch (week) {
        case 0:
            return "星期日"
        case 1:
            return "星期一"
        case 2:
            return "星期二"
        case 3:
            return "星期三"
        case 4:
            return "星期四"
        case 5:
            return "星期五"
        case 6:
            return "星期六"
    }
})

const emit = defineEmits(['close'])
const handleClose = () => {
    emit('close')
}
</script>

<template>
    <div class="APP">
        <div class="header" style="display: flex;justify-content: space-between;">
            <span style="margin: 10px;">海洋多要素展示</span>
            <!-- 关闭按钮 -->
            <div style="cursor: pointer;margin-left: auto;margin-right: 20px;" @click="handleClose">x</div>
        </div>
        <div class="main">
            <div class="time">
                <span>{{ dateValue }}</span>
                <span style="margin-left: 20px;">{{ getWeek }}</span>
                <!-- <span style="margin-left: auto;margin-right: 0;">17:00</span> -->
            </div>
            <div class="content">
                <el-table :data="dataSource" style="width: 100%">
                    <!-- <el-table-column label="时间" type="index" width="60" align="center" /> -->
                    <!-- time -->
                    <el-table-column prop="time" label="时间" align="center" width="60">
                        <template #default="{ row }">
                            <span>{{ row.time }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="temp" label="温湿度" align="center">
                        <template #default="{ row }">
                            <div
                                style="display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;height: 100%;"
                                :style="{backgroundColor: row.temp.color}"
                                >
                                <span style="font-size: 12px;">{{ row.temp.humidity }}%</span>
                                <span style="font-weight: 600;">{{ row.temp.temp }}℃</span>
                            </div>
                        </template>
                    </el-table-column> -->
                    <!-- <el-table-column prop="weather" label="天气" align="center" width="60">
                        <template #default="{ row }">
                            <img :src="row.weather" style="width: 20px;height: 20px;">
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="tide" label="潮位" align="center">
                        <template #default="{ row }">
                            <span style="font-size: 16px;">{{ row.tide?row.tide:0 }}m</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="surge" label="增水" align="center" width="60">
                        <template #default="{ row }">
                            <span>{{ row.surge }}m</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="wind" label="风" align="center">
                        <template #default="{ row }">
                            <div
                                style="display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;height: 100%;">
                                <img :src="dirPng" :style="{
                                    transform: `rotate(${row.wind.direction}deg)`,
                                    width: '10px',
                                    height: '10px'
                                }">
                                <span style="font-size: 16px;">{{ row.wind.speed }}m/s</span>
                                <span style="font-size: 12px;font-weight: 400;">{{ row.wind.level - 1 }}-{{ row.wind.level
                                }}级</span>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="current" label="流" align="center" width="70">
                        <template #default="{ row }">
                            <div
                                style="display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;height: 100%;">
                                <img :src="dirPng" :style="{
                                    transform: `rotate(${row.current.direction}deg)`,
                                    width: '10px',
                                    height: '10px'
                                }">
                                <span>{{ row.current.speed }}m/s</span>
                            </div>
                        </template>
                    </el-table-column> -->

                    <el-table-column prop="wave" label="浪" align="center">
                        <template #default="{ row }">
                            <!-- 背景颜色为渐变蓝 -->
                            <div
                                style="display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;height: 100%;">
                                <img :src="dirPng" :style="{
                                    transform: `rotate(${row.wave.direction}deg)`,
                                    width: '10px',
                                    height: '10px'
                                }">
                                <span style="font-size: 16px;">{{ row.wave.height }}m</span>
                                <span style="font-size: 12px;font-weight: 400;">小浪</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.APP {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .header {
        height: 50px;
        width: 100%;
        border-bottom: 1px solid #ccc;
        position: fixed;
        top: 0;
        display: flex;
        align-items: center;
        font-family: '钉钉进步体';
        font-size: 20px;
    }

    .main {
        width: 100%;
        height: calc(100% - 50px);
        position: fixed;
        top: 50px;

        .time {
            height: 30px;
            width: 100%;
            background-color: var(--el-color-Fill-Darker);
            display: flex;
            align-items: center;
            padding: 0px 10px;

            // font-weight: 600;
            span {
                font-weight: 500;
                font-family: '得意黑体';
            }
        }

        .content {
            height: calc(100% - 30px);
            overflow: auto;

            :deep(.cell) {
                // font-family: '得意黑体';
                font-size: 14px;

                span {
                    font-weight: 600;
                }
            }

            :deep(.el-table_1_column_6) {
                // background-color: rgba(0, 0, 255, 0.1);
                // 蓝色渐变从左到右，白到蓝
                // background: linear-gradient(to right, #ffffff, #4a90e2);
                // 白色更多
                // background: linear-gradient(to right, #ffffff, #ffffff);
                background: linear-gradient(90deg, #ffffff 40%, #79a8de 100%);

            }
        }
    }
}
</style>